{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__INDEX__/css/swiper-5.4.5.min.css">
<link rel="stylesheet" href="__INDEX__/css/index.css?v=3">
{/block}
{block name="content"}
{include file="public/suspension"/}
<!-- 轮播图 -->
<a href="javascript:void(0)" onclick="_MEIQIA('showPanel')">
    <div class="swiper-container">
        <div class="swiper-wrapper">
                {foreach name="bannerList" item="v"}
                    <div class="swiper-slide" style="background-image: url({$v.img_url})"></div>
                {/foreach}
        </div>
        <div class="swiper-pagination"></div>
    </div>
</a>
<!-- 核心服务 -->
<div class="warp">
    <div class="service">
        <div class="service-center">
            <div class="title-en service-center-title-en">AIS SERVICES</div>
            <div class="title-cn">艾思服务</div>
            <div class="service-list">
                <ul>
                    <li>
                        <img  class="service-list-img" src="__INDEX__/images/service-list-img-1.png" alt="Android安卓 APP开发">
                        <div class="service-list-text">
                            <h4>Android安卓 APP开发</h4>
                            <p>艾思软件拥有杰出的研发团队，可根据客户的需求提供高品质的安卓APP开发解决方案!使得企业生活便利智能化与企业系统品牌价值的双提升。</p>
                        </div>
                    </li>
                    <li>
                        <img  class="service-list-img" src="__INDEX__/images/service-list-img-2.png" alt="IOS苹果APP软件开发">
                        <div class="service-list-text">
                            <h4>IOS苹果APP软件开发</h4>
                            <p>苹果APP软件开发首选艾思科技，酷蜂技术人员近80人，核心技术团队曾任职于腾讯、阿里巴巴、金蝶等名企，服务超过400家企业，我们是技术派，用实力说话。</p>
                        </div>
                    </li>
                    <li>
                        <img  class="service-list-img" src="__INDEX__/images/service-list-img-3.png" alt="HTML5 开发">
                        <div class="service-list-text">
                            <h4>HTML5 开发</h4>
                            <p>专注于HTML5开发，拥有卓越的交互体验设计，坚持创新风格，以用户体验为基础，深入用户的想法，把技术实现到各个主流开发平台。</p>
                        </div>
                    </li>
                    <li>
                        <img  class="service-list-img" src="__INDEX__/images/service-list-img-4.png" alt=">微信公众平台开发">
                        <div class="service-list-text">
                            <h4>微信公众平台开发</h4>
                            <p>为企业提供个性化定制的微信公众号，小程序开发服务，服务500多家客户，快速提高企业知名度，帮您打造微品牌。</p>
                        </div>
                    </li>
                    <li>
                        <img  class="service-list-img" src="__INDEX__/images/service-list-img-5.png" alt="手机网站建设">
                        <div class="service-list-text">
                            <h4>手机网站建设</h4>
                            <p>艾思软件拥有一流的手机网站建设团队，人性化贴心服务，售后有保障，超过上千的网站建设案例。</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 作品案例 -->
<!-- <li class="workcase-active">APP开发</li> -->
<div class="workcase-bg">
    <div style="position: absolute;">
        <div class="case-bg"></div>
    </div>
    <div class="workcase">
        <div class="workcase-en">WORK CASE</div>
        <div class="workcase-nav">
            <div class="workcase-title">作品案例</div>
            <div class="workcase-cate">
                <ul>
                    {foreach name="cateList" item="cate"}
                        <li>
                            <a href="/index/Products/index?id={$cate.id}">
                                {$cate['title']}
                            </a>
                        </li>
                    {/foreach}
                </ul>
            </div>
        </div>
        <div class="workcase-list">
            <ul>
                {foreach name="productsList" item="product"}
                    <li class="workcase-list-img">
                        <a href="/index/Products/detail?id={$product.id}" target="_blank">
                            <img class="product-img" src="{$product.img_url}" alt="{$product['title']}">
                            <div class="product-title"><div>{$product['title']}</div></div>
                        </a>
                    </li>
                {/foreach}
            </ul>
        </div>
    </div>
   
</div>
<!-- 关于我们 -->
<div class="warp block">
    <div class="contact-banner"></div>
    <div class="aboutus" id="aboutUs">
        <div class="aboutus-left"></div>
        <div class="aboutus-right">
            <div class="about-en">ABOUT US</div>
            <div class="about-title">关于我们</div>
            <div class="about-desc">
                山东艾思软件科技有限公司，是一家新型的以移动互联网开发为主的公司，成 立于2018年，至于成立软件设计开发服务领域的顶尖公司。公司业务主要涉及 网页开发，各类小程序开发，iOS（iPhone/iPad）、Android等APP定制开 发。
            </div>
            <div class="about-more">
                <a href="/index/Index/about" target="_blank">
                    <span style="color: white">MORE&nbsp;&nbsp;&nbsp;&nbsp;>></span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="warp" style="background-color: #f8f8f8;">
    <div class="solution" id="solution">
        <div class="solution-title-en title-en">DEVOTION MAKES PERFECTION</div>
        <div class="title-cn">解决方案</div>
        <ul>
            {foreach name="solutionList" item="solution"}
            <li>
                <a href="/index/Solution/detail?id={$solution.id}">
                    <div class="icon"><img src="{$solution.icon_url}" /></div>
                    <div class="img"><img src="{$solution.img_url}" /></div>
                    <div class="title">{$solution.title}</div>
                    <div class="desc">{$solution.desc}</div>
                    <div class="button"><span>MORE</span></div>
                </a>
            </li>
            {/foreach}
        </ul>
    </div>
</div>
<!-- 新闻动态 -->
<div class="news news-top-bg">
    <div class="news news-bottom-bg">
        <div class="news-content" id="news">
            <div class="news-en">NEWS INFORMATION</div>
            <div class="news-title">新闻动态</div>
            <div class="news-list">
                {foreach name="newsList" item="news"}
                    <div class="news-list-base">
                        <div class="img" style="background-image: url({$news.img_url});"></div>
                        <div class="title"><a href="/index/News/detail?id={$news.id}">{$news['title']}</a></div>
                        <div class="time">
                            <a href="/index/News/detail?id={$news.id}" target="_blank">
                                <img src="__INDEX__/images/time@2x.png" alt=""> {$news['create_time']}
                            </a>
                        </div>
                        <div class="desc">
                            <a href="/index/News/detail?id={$news.id}">{$news['desc']}</a>
                        </div>
                    </div>
                {/foreach}
                <div class="news-list-base">
                    <ul>
                        {foreach name="newsListAll" item="newsAll"}
                            <li>
                                <div class="last-title">
                                    <a href="/index/News/detail?id={$newsAll.id}" target="_blank">{$newsAll['title']}</a></div>
                                <div class="last-time">{$newsAll['create_time']}</div>
                            </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
            <div class="new-more-content">
                <a class="news-more" href="/index/News/index">更多新闻</a>
            </div>
        </div>
    </div>
</div>
<!-- 合作伙伴 -->
<div class="customer" id="customer">
    <div class="customer-content">
        <div class="customer-en">OUR CUSTOMERS</div>
        <div class="customer-title">合作伙伴</div>
        <div class="customer-list">
            <ul>
                {foreach name="partnerList" item="partner"}
                    <li><img src="{$partner['img_url']}" alt=""></li>
                {/foreach}
            </ul>
        </div>
    </div>
</div>
<div class="clear"></div>
{/block}
{block name="script"}
<script>
    var clearTimeShowProducts;
    function showProducts(){
        if ($(window).scrollTop() > 0) {
            $(".workcase").animate({paddingTop:'0px', 'opacity': 1}, 1500);
            clearTimeout(clearTimeShowProducts);
        }

        clearTimeShowProducts = setTimeout("showProducts()", 1000);
    }

    var clearTimeShowNews;
    function showNews(){
        let newsOffsetTop = $('#news').offset().top;
        if(newsOffsetTop >= $(window).scrollTop() && newsOffsetTop < ($(window).scrollTop() + $(window).height())) {
            $("#news").animate({paddingTop:'0px', 'opacity': 1}, 1500);
            clearTimeout(clearTimeShowNews);
        }

        clearTimeShowNews = setTimeout("showNews()", 1000);
    }

    var clearTimeShowAboutUs;
    function showAboutUs(){
        let aboutUsOffsetTop = $('#aboutUs').offset().top;
        if(aboutUsOffsetTop >= $(window).scrollTop() && aboutUsOffsetTop < ($(window).scrollTop() + $(window).height())) {
            $("#aboutUs").animate({paddingTop:'0px', 'opacity': 1}, 1500);
            clearTimeout(clearTimeShowAboutUs);
        }

        clearTimeShowAboutUs = setTimeout("showAboutUs()", 1000);
    }

    var clearTimeShowCustomer;
    function showCustomer(){
        let customerOffsetTop = $('#customer').offset().top;
        if(customerOffsetTop >= $(window).scrollTop() && customerOffsetTop < ($(window).scrollTop() + $(window).height())) {
            $("#customer").animate({paddingTop:'0px', 'opacity': 1}, 1500);
            clearTimeout(clearTimeShowCustomer);
        }

        clearTimeShowCustomer = setTimeout("showCustomer()", 1000);
    }

    var clearTimeShowSolution;
    function showSolution(){
        let solutionOffsetTop = $('#solution').offset().top;
        if(solutionOffsetTop >= $(window).scrollTop() && solutionOffsetTop < ($(window).scrollTop() + $(window).height())) {
            clearTimeout(clearTimeShowSolution);

            $('#solution ul li').each(function(index, item){
                setTimeout(function(){
                    $(item).animate({'opacity': 1}, 1000);
                }, index)
            })
        }
        clearTimeShowSolution = setTimeout("showSolution()", 1000);
    }

    $(document).ready(function(){
        $(".workcase").css({paddingTop:'60px', 'opacity': 0.4});
        showProducts();

        $('#solution ul li').css({'opacity': 0.4});
        showSolution();

        $('#solution ul li').mouseover(function(){
            $(this).find('.icon img').css('background', '#1A78FF');
            $(this).find('.button span').css('background', '#1A78FF')
        }).mouseleave(function(){
            $(this).find('.icon img').css('background', 'none');
            $(this).find('.button span').css('background', '#CFD9E2')
        })

        $("#aboutUs").css({paddingTop:'60px', 'opacity': 0.4});
        showAboutUs();

        $("#news").css({paddingTop:'60px', 'opacity': 0.4});
        showNews();

        $("#customer").css({paddingTop:'60px', 'opacity': 0.4});
        showCustomer();

        $(".suspension").animate({right:'15px', 'opacity': 1}, 5000);
    })
</script>

<script src="__INDEX__/js/swiper-5.4.5.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        speed: 1500,
        loop: true,
        autoplay: true,
        mousewheel: false,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        on: {
            init: function (swiper) {
                slide = this.slides.eq(0);
                slide.addClass('ani-slide');
            },
            transitionStart: function () {
                for (i = 0; i < this.slides.length; i++) {
                    slide = this.slides.eq(i);
                    slide.removeClass('ani-slide');
                }
            },
            transitionEnd: function () {
                slide = this.slides.eq(this.activeIndex);
                slide.addClass('ani-slide');

            },
        }
    });
</script>
{/block}
